{{extend 'layout.html'}}
<style type="text/css">
.menu, .menu + td { border: 1px solid black}
table{width: 100%;}
input[type=text]{width: 98%;}
button{vertical-align:middle;}
</style>
<script>
$(function() {
    $('input[name^=s_]').keyup(function() {

        list = $('#list').find('tr:not(#add-row)').has('td');

        var text1 = $('input[name=s_role]').val().toLowerCase();
        if (text1 != '') var pattern1 = new RegExp('^.*' + text1 + '.*$', 'ig');
        else var pattern1 = new RegExp('.*', 'ig');
        var text2 = $('input[name=s_description]').val().toLowerCase();
        if (text2 != '') var pattern2 = new RegExp('^.*' + text2 + '.*$', 'ig');
        else var pattern2 = new RegExp('.*', 'ig');

        list.hide()
        $.each(list, function(index,value){
        {{if auth.has_membership('Admin') or auth.has_membership('Telehealth'):}}            
            if ($(this).find('[name=role]').val().match(pattern1) && $(this).find('[name=description]').val().match(pattern2)) 
        {{else:}}    
            if ($(this).find('[name=role]').text().match(pattern1) && $(this).find('[name=description]').text().match(pattern2))         
        {{pass}}            
                $(this).show() 
        })
    })
{{if auth.has_membership('Admin') or auth.has_membership('Telehealth'):}}    
    $('#add-group').live('click', function(){
        role = $('input[name=new_role]').val()
        description = $('input[name=new_description]').val()
        if(role =='') {alert('Role should not be blank.'); return }
        if(description==''){alert('Description should not be blank.'); return }

        $.ajax({
            url: '{{=URL('create')}}',
            data: 'role=' + role + '&' + 'description=' + description,
            success: function(data){
                if(data != 0) {
                    msg = 'Group is successfully added.'
                    role = $('input[name=new_role]').val()
                    description = $('input[name=new_description]').val()
{{if auth.has_membership('Admin'):}}                    
    $('#add-row').after('<tr><td><input type="text" value="'+role+'"></td><td><input type="text" value="'+description+'"></td><td><a class="update-row" name="'+data+'">Update</a> | <a class="del-row" name="'+data+'">Delete</a></td></tr>')                        
{{else:}}
    $('#add-row').after('<tr><td><input type="text" value="'+role+'"></td><td><input type="text" value="'+description+'"></td><td><a class="update-row" name="'+data+'">Update</a></td></tr>')                        
{{pass}}                    
                    $('input[name=new_role]').val('')
                    $('input[name=new_description]').val('')                        
                } else msg = 'Sorry, that group has already been created.'
            
                $('.flash').html(msg).slideDown(function(){ $('.flash').delay(3000).fadeOut(function(){$('.flash').html('')});});
            }
        })        
    })

    $('.update-row').live('click',function(){
        role = $(this).parent().prev().prev().children().first().val()
        description = $(this).parent().prev().children().first().val()
        if(role =='') {alert('Role should not be blank.'); return }
        if(description==''){alert('Description should not be blank.'); return }

        $.ajax({
            url: '{{=URL('update')}}',
            data: 'id=' + this.name +'&' + 'role=' + role + '&' + 'description=' + description,
            context: $(this).parent().parent(),
            success: function(data){
                
                if(data == 0) msg = 'Group successfully updated.'
                else {
                    obj = JSON.parse(data)
                    $(this).children().first().children().first().val(obj[0].role)
                    $(this).children().eq(1).children().first().val(obj[0].description)
                    msg = 'Sorry, there is already an existing group with the same role.'
                }
            
                $('.flash').html(msg).slideDown(function(){ $('.flash').delay(3000).fadeOut(function(){$('.flash').html('')});});
            }
        })        
    })
{{pass}}
{{if auth.has_membership('Admin'):}}    
    $('.del-row').live('click', function(){
        var answer = confirm('Are you sure you want to delete this?')
        if (answer){
            $.ajax({
                url: '{{=URL('delete')}}',
                data: 'id=' + this.name,
                context: this,
                success: function(data){
                    msg = 'The group has been successfully deleted.'
                    $(this).parent().parent().fadeOut(1000, function(){ $(this).remove()})
                    $('.flash').html(msg).slideDown(function(){ $('.flash').delay(500).fadeOut(function(){$('.flash').html('')});});
                }                
            })        
        }     
    })
{{pass}}    
});
</script>
<table>
<tr>
<td>Logo</td>
<td>
{{=TABLE(TR(LABEL('Search: '),INPUT(_name='s_role', _placeholder='search by role'),INPUT(_name='s_description', _placeholder='search by description'),TD(TAG.BUTTON('Clear search fields', _onclick="$('[name^=s_]').val('');$('[name^=s_]').keyup();"))))}}
</td>
</tr>

<tr>
<td width="15%" class='menu'>
    <table class='menu_table' width='100%'>
    {{=LOAD('default','sidebar.load')}}
    </table>        
</td>
<td>
<table id='list'>
{{=TR(TH('Name'), TH('Description', _colspan=2))}}
{{if auth.has_membership('Admin') or auth.has_membership('Telehealth'):}}    
{{=TR(TD(INPUT(_name='new_role')),TD(INPUT(_name='new_description')), TD(A('Add', _id='add-group')), _id='add-row')}}
{{pass}}
{{for group in groups:}}
<tr>
{{if auth.has_membership('Admin') or auth.has_membership('Telehealth'):}}    
{{=TD(INPUT(_name='role',_value=group.role))}}
{{=TD(INPUT(_name='description', _value=group.description))}}
{{if auth.has_membership('Admin'):}}
{{=TD(A('Update', _name=group.id, _class='update-row'),' | ',A('Delete',  _name=group.id, _class='del-row'))}}
{{else:}}
{{=TD(A('Update', _name=group.id, _class='update-row'))}}
{{pass}}
{{else:}}
{{=TD(group.role, _name='role')}}
{{=TD(group.description, _name='description')}}

{{pass}}
</tr>
{{pass}}
</table>

</td></tr>
</table>
